<template>
    <el-button type="primary" @click="addOneShow = true; oneData = { level: 1, parentId: 0, };">添加合作伙伴</el-button>
    <div class="bgf mart20" v-loading="loading">

        <el-dialog v-model="imgShow" width="760px">
            <img class="ww100" :src="showImg" alt="">
        </el-dialog>
        <el-table :data="list">
            <el-table-column prop="partnersId" fixed min-width="140" label="编号" show-overflow-tooltip></el-table-column>

            <el-table-column min-width="120" label="图标">
                <template #default="scope">
                    <img  @click="imgShow = true; showImg = scope.row.logo" :src="scope.row.logo" alt="" width="40" height="40">
                </template>
            </el-table-column>

            <el-table-column prop="sort" min-width="100" label="排序" show-overflow-tooltip></el-table-column>


            <el-table-column prop="createTime" min-width="160" label="创建时间"></el-table-column>

            <el-table-column fixed="right" label="操作" width="160">
                <template #default="scope">
                    <el-button @click="edit(scope.row)" text type="primary">编辑</el-button>
                    <el-divider direction="vertical" />
                    <el-button @click="del(scope.row)" text type="primary">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="addOneShow" :title="oneData.cateId ? '编辑合作伙伴' : '添加合作伙伴'" width="590px">
        <el-form :model="oneData" label-width="100px" ref="oneForm" :rules="rules">

            <el-form-item label="图片：" prop="logo">
                <el-upload :headers="{ token: $store.state.token }" :action=globalUrl
                    :on-success="(val) => uploadSuccess(val, 'oneData')" class="avatar-uploader" :show-file-list="false"
                    name="file">
                    <img v-if="oneData.logo" :src="oneData.logo" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <div class="col9e lh34  font12 ">
                    尺寸：110*110 像素
                </div>
            </el-form-item>
            <el-form-item label="排序：" prop="sort">
                <el-input v-model="oneData.sort" placeholder="输入序号" class="w130" />
            </el-form-item>
            <el-form-item label="id：" prop="partnersId" v-if="isVisible">
                <el-input v-model="oneData.partnersId" placeholder="输入序号" class="w130" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addOneShow = false">取消</el-button>
                <el-button type="primary" @click="addSubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            globalUrl: '/api/system/upload/uploadList',
            oneData: {},
            addOneShow: false, //添加课程分类
            loading: false,
            param: {
                pageNumber: 1,
                pageSize: 10,
            },
            total: 0,
            list: [],
            imgShow: false,
            isVisible: false,
            rules: {
                cateTitle: [{ required: true, message: '请输入分类名称', trigger: 'change' }],
                sort: [{ required: true, message: '请输入排序', trigger: 'change' }],
                img: [{ required: true, message: '请上传分类图片', trigger: 'change' }],
                isShow: [{ required: true, message: '请选择是否显示', trigger: 'change' }],
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {

        //图片上传成功
        uploadSuccess(val, key) {
            console.log(val, key)
            if (val.status == 200) {
                let obj = this.utils.Decrypt(val.data);
                console.log(obj)
                this[key].logo = obj.path
            }
        },

        edit(val) {
            let that = this;

            that.oneData = {
                partnersId: val.partnersId,
                sort: val.sort,
                logo: val.logo,
            }
            that.addOneShow = true;
        },

        addSubmit() {
            let that = this;
            let obj = that.oneData;

            console.log(obj, 'obj----------------');
            that.$refs['oneForm'].validate(async (res) => {
                if (res) {

                    if (obj.partnersId == null) {
                        let res = await that.$api.insert(obj);
                    } else {
                        let res = await that.$api.update(obj);
                    }

                    if (res) {
                        that.getList(1);
                        that.addOneShow = false;
                        that.$message.success(res.msg)
                    }
                }
            })

        },

        // 删除分类
        del(val) {
            console.log(val)
            let that = this;
            this.$confirm(
                "课程分类删除请谨慎操作，删除后将无法恢复，确定删除？",
                "删除课程分类",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).then(() => {
                that.$api.delete({ partnersId: val.partnersId }).then(res => {
                    console.log(res);
                    if (res) {
                        that.$message.success(res.message)
                        that.getList(1);
                    }
                })
            }).catch(() => { });

        },

        getList(pageNumber) {
            let that = this;
            if (pageNumber) {
                that.param.pageNumber = pageNumber;
            }
            console.log(that.param)
            that.loading = true;
            that.$api.partnersList(that.param).then(res => {
                console.log(res);
                if (res) {
                    that.list = res.records;
                    that.total = res.total;
                }
                that.loading = false;
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.el-icon.avatar-uploader-icon {
    width: 80px;
    height: 80px;
}

:deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
}
</style>
